<template>
  <div class="bcg paylist">
    <header-comm></header-comm>
    <div class="hedlist">
      <div class="headbtn">
        <!-- <a-button type="primary" class="editable-add-btn">
          <router-link to="/Merchantentry">新增二级商户进件</router-link>
        </a-button>-->
      </div>
      <div class="head_search">
        <div class="sele">
          <a-input placeholder="请输入关键字查询" v-model="xlpp" @change="xlchange" style="width: 200px" />
          <a-icon type="search" class="search" />
        </div>
      </div>
    </div>
    <div class="skgl">
      <div>
        <a-table
          @change="getskglList"
          :loading="loading"
          :dataSource="dataSource"
          :pagination="pagination"
          :columns="columns"
        >
          <!-- 111111111111111111111111111 -->
          <template slot-scope="text, record, index" slot="expandedRowRender">
            <div class="div">
              <!-- <div class="addchild"><a-button  type="primary" size="small">添加</a-button></div> -->
              <div class="ddxxlist ddxxhead">
                <span class="listspan">型号</span>
                <span class="listspan">品牌</span>
                <span class="listspan">地址</span>
                <span class="listspan">价格</span>
                <span class="listspan">数量</span>
                <span class="listspan">合计</span>
                <span class="listspan">状态</span>
              </div>
              <div class="ddxxlist dxbody" v-for="(item,i) in text.child" :key="i">
                <span class="listspan" :class="'xhval_'+i">{{item.XL}}</span>
                <span class="listspan" :class="'ppval_'+i">{{item.SCCJC}}</span>
                <span class="listspan">{{item.SZQY}}</span>
                <span class="listspan">
                  <span>
                    <span class="orange">
                      ￥
                      <span :class="'moninpflg_'+item.key">{{item.HSJ}}</span>
                    </span>
                    /{{item.JLDW}}
                  </span>
                </span>
                <span class="listspan">
                  x
                  {{item.DHSL}}
                </span>
                <span class="listspan">
                  小计：
                  <span class="orange red">
                    ￥
                    <span :class="'hjmon_'+item.key">{{(item.HSJ*item.DHSL).toFixed(2)}}</span>
                  </span>
                </span>
                <span class="listspan">
                  <a-badge :count="item.SHBJB" :numberStyle="{ backgroundColor: 'red' }" />
                </span>
              </div>
            </div>
          </template>
          <!-- 111111111111111111111111111 -->
          <template slot-scope="text, record, index" slot="operation">
            <div class="cz" v-if="record.child">
              <span
                class="del"
                :style="record.child[0].SHBJB=='待发货'||record.child[0].SHBJB=='已发货'?'':'color:#ccc'"
                @click="record.child[0].SHBJB=='待发货'||record.child[0].SHBJB=='已发货'?orderRefund(record):''"
              >{{record.child[0].SHBJB=='已退款'?record.child[0].SHBJB:'退款'}}</span>
              <!-- <span @click="profitSharing" class="del">分账</span> -->
              <a-popconfirm
                title="确定分账吗?"
                class="cz"
                :disabled="(record.child[0].SHBJB=='待发货'||record.child[0].SHBJB=='已发货'||record.child[0].profitsharing_status!='FINISHED') && record.child[0].SHBJB!='已退款'?false:true"
                @confirm="() => record.child[0].SHBJB=='待发货'||record.child[0].SHBJB=='已发货'||record.child[0].profitsharing_status!='FINISHED'?profitSharing(record):''"
              >
                <a>分账{{record.child[0].profitsharing_status=''?'':record.child[0].profitsharing_status}}</a>
              </a-popconfirm>
            </div>
          </template>

          <template slot="applyment_state" slot-scope="text, record">
            <div>{{record.applyment_state_desc}}</div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../header-comm/header.vue";

const dataSource = [];
const columns = [
  {
    title: "付款人",
    dataIndex: "LXR",
    scopedSlots: { customRender: "LXR" }
  },
  {
    title: "总单号",
    dataIndex: "uniteOrderNo",
    scopedSlots: { customRender: "uniteOrderNo" }
  },
  {
    title: "付款金额",
    dataIndex: "FKJE",
    scopedSlots: { customRender: "FKJE" }
  },
  {
    title: "付款日期",
    dataIndex: "FKRQ",
    scopedSlots: { customRender: "FKRQ" }
  },
  {
    title: "二级单号",
    dataIndex: "OUT_NO",
    scopedSlots: { customRender: "OUT_NO" }
  },
  {
    title: "商户号",
    dataIndex: "mchid",
    scopedSlots: { customRender: "mchid" }
  },
  {
    title: "商户简称",
    dataIndex: "attach",
    scopedSlots: { customRender: "attach" }
  },

  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
const innerColumns = [
  { title: "型号", dataIndex: "XL", key: "XL" },
  { title: "品牌", dataIndex: "SCCJC", key: "SCCJC" },
  { title: "地址", dataIndex: "SZQY", key: "SZQY" },
  { title: "价格", dataIndex: "HSJ", key: "HSJ" },
  { title: "数量", dataIndex: "DHSL", key: "DHSL" },
  { title: "合计", dataIndex: "hj", key: "hj" }
];

const innerData = [];
export default {
  inject: ["reload"],
  data() {
    this.cacheData = dataSource.map(item => ({ ...item }));
    return {
      dataSource,
      columns,
      //count: 2
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      loading: true,
      xlpp: "",
      qrcode: "",
      visible: false,
      innerColumns,
      innerData
    };
  },
  components: {
    headerComm
  },
  methods: {
    xlchange(e) {
      this.xlpp = e.target.value;
      this.getskglList(this.pagination, this.xlpp);
    },
    orderRefund(value) {
      this.axios
        .post(
          "https://xh.bearing.cn/api/wxpay/orderRefund.php",
          qs.stringify({
            phone: value.PHONE,
            sqdhdh: value.OUT_NO
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.getskglList(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },

    profitSharing(value) {
      this.axios
        .post(
          "https://xh.bearing.cn/api/wxpay/profitSharing.php",
          qs.stringify({
            dhrphone: value.PHONE,
            sqdhdh: value.OUT_NO,
            uniteOrderNo: value.uniteOrderNo
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.getskglList(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    //删除
    // onDelete(id, key) {
    //   this.axios
    //     .post(
    //       "wxpay/delSubUserbyId.php",
    //       qs.stringify({
    //         id_num: id
    //       })
    //     )
    //     .then(res => {
    //       console.log(res);
    //       if (res.data.code == 303) {
    //         //删除成功,总条数减1
    //         this.pagination.total = this.pagination.total - 1;
    //         const dataSource = [...this.dataSource];
    //         this.dataSource = dataSource.filter(item => item.key !== key);
    //         this.$notification["success"]({
    //           message: "成功",
    //           description: res.data.msg
    //         });
    //       } else {
    //         this.$notification["error"]({
    //           message: "失败",
    //           description: res.data.msg
    //         });
    //       }
    //     });
    // },
    //商户管理--列表
    getskglList(pagination, ggpp) {
      console.log(pagination);
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "order/wxPayList.php",
          qs.stringify({
            pageSize: pagination.defaultPageSize,
            phone: this.$store.state.bbl_phone,
            sqdwid: this.$store.state.bbl_sqdwid,
            page: this.pagination.current,
            keywords: this.xlpp
          })
        )
        .then(res => {
          console.log(res);
          this.loading = false;
          if (res.data.code == 303) {
            this.dataSource = res.data.result.data;
            this.pagination.total = Number(res.data.result.total);

            for (var i = 0; i < res.data.result.data.length; i++) {
              this.dataSource[i].key = res.data.result.data[i].ID_NUM;
              // this.dataSource[i].profitsharing_status =  res.data.result.data[i].profitsharing_status.trim();
            }
          } else {
            this.dataSource = [];
          }
        });
    }
  },

  created() {
    this.getskglList(this.pagination);
  }
};
</script>

<style lang='less' scoped>
.paylist {
  .hedlist {
    position: relative;
    top: 65px;
    width: 98%;
    left: 1%;
    height: 60px;
    background-color: #fff;
    text-align: left;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    .head_search {
      .sele {
        position: relative;
        display: inline-block;
        margin: 0 10px;
        i {
          position: absolute;
          top: 22px;
          right: 8px;
          font-size: 16px;
        }
      }
    }
  }

  .skgl {
    width: 98%;
    height: auto;
    position: relative;
    top: 100px;
    left: 1%;
    // box-shadow: 0 0 5px #ccc;
    border: 1px solid #ccc;
    text-align: left;
    background-color: #fff;
    .xj {
      img {
        width: 50px;
        height: 50px;
        margin: 0 10px;
        border: 1px solid #ccc;
      }
    }

    .button {
      margin: 15px 0;
    }
  }
  .ddxxhead {
    border-bottom: 1px solid #ccc;
    .listspan {
      // color: #bababa;
    }
  }
  .ddxxlist {
    display: flex;
    justify-content: space-between;
    width: 70%;
    padding: 10px;
    .listspan {
      // display: flex;
      // justify-content: space-between;
      width: 20%;
      .anticon svg {
        font-size: 18px;
      }
    }
    .rightspan {
      width: 10%;
      text-align: right;
    }
    span {
      button {
        margin: 0 10px;
      }
      .button {
        background-color: #1890ff;
        border: 0 !important;
      }
    }
    .orange {
      color: red;
      .input {
        outline: none;
        border: 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 3px 8px;
      }
    }
    .red {
      font-size: 14px;
    }
  }
}
</style>
